<template>
  <div>
    <div id="link">
      <div class="tablebox">
        <div class="col-lg-12">
          <div style="float: right">
            <el-form ref="tradeDto" label-width="120px">
              <el-form-item label="违约情况：">
                <el-select
                  v-model="tradeDto.default_id"
                  placeholder="查询违约情况"
                  @change="refreshTrade(1)"
                >
                  <el-option label="所有" value="-1" />
                  <el-option
                    v-for="item in defaultInfos"
                    :key="item"
                    :label="item.default_info"
                    :value="item.default_id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <h4 style="color: #fff">所有交易</h4>
        </div>
        <div id="linkB">
          <el-table :data="allTrade" style="width: 100%" stripe>
            <el-table-column
              prop="buyer"
              label="买方ID"
              align="center"
              header-align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="seller"
              label="卖方ID"
              align="center"
              header-align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="match_time"
              label="撮合时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="price"
              label="成交价/分"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="contract_elec"
              label="成交电量"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="output_elec"
              label="实际出电量/千瓦时"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="use_elec"
              label="实际用电量/千瓦时"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="default_info"
              label="违约状态"
              align="center"
              header-align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showTradeDetail(scope.row.trade_id)"
                  >区块信息</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="paginationBox">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="refreshTrade"
          :page-count="pageHelp1.pages"
          :page-size="pageHelp1.pageSize"
        />
      </div>
    </div>
    <!--所有交易详情开始 -->
    <el-dialog title="详情" :visible.sync="jiaoyidetaileVisible" width="600px">
      <div class="jiaoyilist">
        <ul>
          <li><span>交易记录:</span>{{ detaileData1.trade_id }}</li>
          <li><span>买方:</span>{{ detaileData1.buyer }}</li>
          <li><span>卖方:</span>{{ detaileData1.seller }}</li>
          <li><span>交易时间:</span>{{ detaileData1.trade_time }}</li>
          <li><span>交易价格:</span>{{ detaileData1.price }}</li>
          <li><span>合约电量:</span>{{ detaileData1.contract_elec }}</li>
          <li><span>买方实际用电量:</span>{{ detaileData1.use_elec }}</li>
          <li><span>卖方实际用电量:</span>{{ detaileData1.output_elec }}</li>
          <li><span>违约情况:</span>{{ detaileData1.default_id }}</li>
          <li><span>区块高度:</span>{{ detaileData1.block_height }}</li>
          <li><span>区块哈希值:</span>{{ detaileData1.block_hash }}</li>
          <li><span>父区块哈希值:</span>{{ detaileData1.block_pre_hash }}</li>
          <li>
            <span>买方电表ID:</span>{{ detaileData1.buyer_elec_meter_id }}
          </li>
          <li>
            <span>卖方电表ID:</span>{{ detaileData1.seller_elec_meter_id }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jiaoyidetaileVisible = false"
          >知道了</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRealease,
  getTimeSlotInfo,
  getAllTrade,
  getTradeDetail,
  getAllDefault,
} from "../../../api/link";
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Login from "@/components/login/index.vue";
import Reg from "@/components/reg/index.vue";
import Release from "@/components/release/index.vue";
export default {
  components: {
    Header,
    Footer,
    Login,
    Reg,
    Release,
  },
  data() {
    return {
      jiaoyidetaileVisible: false,
      tradeDto: {
        default_id: "-1",
      },
      detaileData1: [],
      allTrade: [],
      defaultInfos: [],
      pageHelp1: {
        // 交易用
        pages: 1, // 总页
        pageSize: 10, // 每页显示个数
      },
    };
  },
  mounted() {
    this.refreshTrade(1);
    this.getAllDefaultHelp();
  },
  methods: {
    refreshTrade(pageNum) {
      getAllTrade(
        pageNum,
        this.pageHelp1.pageSize,
        this.tradeDto.default_id
      ).then((res) => {
        const data = res.data;
        this.pageHelp1.pageSize = data.pageSize;
        this.pageHelp1.pages = data.pages;

        // 将违规情况相互匹配
        this.getDefault(data.list);

        this.allTrade = data.list;
      });
    },
    getDefault(list) {
      for (var i = 0; i < list.length; i++) {
        list[i].default_info = list[i].default_id
          ? this.defaultInfos[list[i].default_id].default_info
          : this.defaultInfos[0].default_info; // 没有就是还未调度
      }
    },

    // 详情
    showTradeDetail(trade_id) {
      this.jiaoyidetaileVisible = true;
      getTradeDetail(trade_id).then((res) => {
        this.detaileData1 = res.data;
      });
    },

    getAllDefaultHelp() {
      getAllDefault().then((res) => {
        this.defaultInfos = res.data;
      });
    },
  },
};
</script>
<style scoped>
</style>
